<template>
  <div id='wrap'>
    <h1>组合式API：生命周期钩子</h1>
    <div>
      <button @click="num++">数字累加{{ num }}</button>
    </div>

    <div>
      <ul>
        <li v-for="item in users" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
    </div>

    <div></div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'vue',
}
</script>

<script lang='ts' setup>
import { ref, onBeforeMount, onBeforeUpdate, onBeforeUnmount, onMounted, onUpdated, onUnmounted } from 'vue';

const num = ref(0);
const flg = ref('true');
// const edit = () => {
//   flg.value = false
// }
//定义用户类型接口
interface Iuser {
  id: number,
  name: string,
  username: string,
  email: string,
  address: {
    street: string,
    suite: string,
    zipcode: string,
    geo: {
      lat: string,
      lng: string
    }
  }
  phone: string,
  website: string,
  conpany: {
    name: string,
    catchPhrase: string,
    bs: string
  }
}

const users = ref<Iuser[]>([]);

onMounted(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  users.value = await response.json();
})

// 注册一个回调函数，在组件挂载完成后执行。
onMounted(() => {
  console.log('onMounted:在组件挂载完成后执行');
});

// 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
onUpdated(() => {
  console.log('onUpdated:在组件因为响应式状态变更而更新其 DOM 树之后调用');
});

// 注册一个回调函数，在组件实例被卸载之后调用
onUnmounted(() => {
  console.log('onUnmounted:在组件实例被卸载之后调用');
});

// 注册一个钩子，在组件被挂载之前被调用。
onBeforeMount(() => {
  console.log('onBeforeMount:在组件被挂载之前被调用');
});

// 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onBeforeUpdate(() => {
  console.log('onBeforeUpdate:，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。');
});

// 注册一个钩子，在组件实例被卸载之前调用。
onBeforeUnmount(() => {
  console.log('onBeforeUnmount:在组件实例被卸载之前调用');
});
</script>

<style lang='scss'>
@use '@/assets/common.scss';
</style>
